<template>
	<div id="addcase" class="page">
		<x-head></x-head>
		<div class="category">
			<div class="type-title" style="font-size: 17px !important;">就诊门类</div>
			<checker class='item' v-model="baseData.departmentCategory" default-item-class="type-item" selected-item-class="type-item-selected" @on-change='selectTab'>
				<checker-item value="门诊">门诊</checker-item>
				<checker-item value="住院">住院</checker-item>
				<checker-item value="急诊">急诊</checker-item>
			</checker>
		</div>
		<group class='notopboder'>
			<x-input title="姓　　名" v-model="baseData.name" placeholder="必填" text-align="right" :required="true"></x-input>
			<x-input title="就诊医院" v-model="baseData.hospitalName" placeholder="必填" text-align="right" :required="true"></x-input>
			<x-input title="就诊结果" v-model="baseData.treatmentResult" placeholder="必填" text-align="right" :required="true"></x-input>
			<datetime title="就诊日期" placeholder="必选" @on-change="datetimeAction" :required="true" format="YYYY-MM-DD" start-date="1900-01-01"></datetime>
			<popup-picker title="就诊科室" confirm-text='确认' :data="list3" :columns="2" v-model="value3" ref="picker3" @on-change='selectDepartment' placeholder='必选'></popup-picker>
			<cell title="图片" is-link style="padding: 15px;  height: 100px; padding-top: 8px; align-items: left; align-items: normal;"  @click.native='jsFormNavtive2'>
				<img :src="imagesUrl" alt="" width="80px" />
			</cell>
		</group>
		<!--<tabbar>
			<tabbar-item @on-item-click="cancelAction">
				<span slot="label" class="prv">取消</span>
			</tabbar-item>
			<tabbar-item @on-item-click="keepAction" class="next">
				<span slot="label">保存</span>
			</tabbar-item>
		</tabbar>-->
		<div class="footer" id="btnbox">
			<router-link class="index_1" to='/case' replace>上一步</router-link>
			<div class="index_2" @click="keepAction">保存</div>
		</div>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	import xHead from '@/components/common/Head.vue'
	export default {
		components: {
			xHead
		},
		data() {
			return {
				state: '',
				value3: [],
				imagesUrl: '',
				baseData: {
					customer_id: '',
					departmentCategory: '', //   门类
					name: '',				//  姓名
					hospitalName: '',       //  就诊医院
					treatmentResult: '',	//  诊断结果
					treatmentTime: '',		//  就诊时间
					Department: '',			//  就诊科室
					imageUrl: ''
				},
				list3: [
					{ name: '内科', value: '内科', parent: 0 }, 
					{ name: '外科', value: '外科', parent: 0 }, 
					{ name: '儿科', value: '儿科', parent: 0 }, 
					{ name: '妇产科', value: '妇产科', parent: 0 }, 
					{ name: '中医科', value: '中医科', parent: 0 }, 
					
					{ name: '心血管内科', value: '心血管内科', parent: '内科' }, 
					{ name: '消化内科', value: '消化内科', parent: '内科' }, 
					{ name: '呼吸内科', value: '呼吸内科', parent: '内科' }, 
					{ name: '神经内科', value: '神经内科', parent: '内科' }, 
					{ name: '肿瘤内科', value: '肿瘤内科', parent: '内科' }, 
					
					{ name: '心血管外科', value: '心血管外科', parent: '外科' },
					{ name: '胸外科', value: '胸外科', parent: '外科' },
					{ name: '泌尿外科', value: '泌尿外科', parent: '外科' },
					{ name: '普外科', value: '普外科', parent: '外科' },
					{ name: '胃肠外科', value: '胃肠外科', parent: '外科' },
					{ name: '神经外科', value: '神经外科', parent: '外科' },
					
					{ name: '儿科', value: '儿科', parent: '儿科' },
					
					{ name: '妇科', value: '妇科', parent: '妇产科' },
					{ name: '产科', value: '产科', parent: '妇产科' },
					
					{ name: '中医内科', value: '中医内科', parent: '中医科' },
					{ name: '康复理疗', value: '康复理疗', parent: '中医科' },
				],
			}
		},
		created(){
			window.jsFormNavtive = this.jsFormNavtive;   // 调相机
			this.baseData.customer_id = localStorage.getItem('customer_id') //  id
		},
		mounted(){
			//  解决 手机键盘弹出bug
			var original = document.documentElement.clientHeight;
			window.addEventListener("resize", function() {
				var resizeHeight = document.documentElement.clientHeight;
				if(resizeHeight != original) {
					document.getElementById('btnbox').style.display = 'none'
				} else {
					document.getElementById('btnbox').style.display = 'block'
				}
			});
		},
		methods: {
			// 点击调安卓相机，安卓调我方法传参
			//  与android交互  调用android相机功能
			jsFormNavtive2(){
				window.android.getCamera('00000');
				return;
			},
			//  与android交互  android 调我方法，传数据给我
			jsFormNavtive(value){
				this.imagesUrl = value;
				this.baseData.imageUrl = value;
				return;
			},
			//  选择门类
			selectTab(value) {
				this.baseData.departmentCategory = value;  // 就诊门类
				console.log(value)
			},
			// 选择时间
			datetimeAction(value) {
				console.log(value)
				this.baseData.treatmentTime = value   //  时间
			},
			//  选择科室
			selectDepartment(value){
				console.log(value[1])
				this.baseData.Department = value[1]   //  科室
			},
			//  保存
			keepAction(){
				console.log(this.baseData);
				if(this.baseData.departmentCategory !=='' && this.baseData.name !=='' && this.baseData.hospitalName !=='' && this.baseData.treatmentResult
					&& this.baseData.treatmentTime && this.baseData.Department !==''
				){
					let param = new URLSearchParams()
					param.append('customer_id', this.baseData.customer_id)
					param.append('departmentCategory', this.baseData.departmentCategory)
					param.append('name', this.baseData.name)
					param.append('hospitalName', this.baseData.hospitalName)
					param.append('treatmentResult', this.baseData.treatmentResult)
					param.append('treatmentTime', this.baseData.treatmentTime)
					param.append('Department', this.baseData.Department)
					param.append('imageUrl', this.baseData.imageUrl)
					this.$http({
						method: 'post',
						url: Api.treatment_recordAddApi,
						data: param
					})
					.then(({data})=>{
						if(data.message == 'success') {
							this.$router.back()
						}
					})
					.catch((err)=>{
						console.log(err)
					})
				} else {
					this.$vux.toast.show({
						text: '资料未填写完整',
						type: 'cancel'
					})
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
.footer {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.footer div,.footer .index_1 {
		width: 50%;
		float: left;
		text-align: center;
		line-height: 50px;
		color: #fff;
		font-size: 14px;
	}
	
	.footer .index_1 {
		background: #F7F7FA;
		display: block;
		color: #999;
	}
	
	.footer .index_2 {
		background: rgb(58, 175, 252);
	}
	.category {
		display: flex;
		padding: 10px 15px 8px;
		.type-title {
			margin-right: 20px;
			
		}
	}
	
	
	
	.item {
		flex: 2;
	}
	
	#addcase {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		width: 100%;
		height: 100%;
		overflow: auto;
		.type-item {
			width: 36px;
			height: 36px;
			border: 1px solid #ccc;
			display: inline-block;
			border-radius: 50%;
			line-height: 36px;
			text-align: center;
			font-size: 12px;
		}
		.type-item-selected {
			background-color: rgb(58, 175, 252);
			color: #fff;
		}
	}
</style>